<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ include file="/WEB-INF/views/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			tr{
				width:40px;
			}
		</style>
  <script type="text/javascript">
	var datagrid;
	var rowEditor=undefined;
	$(function(){
		datagrid=$("#dg").datagrid({
			url:"${cs}/cs/user/Menu/list",//加载的URL
		    isField:"id",
			pagination:true,//显示分页
			pageSize:10,//分页大小
			pageList:[10,15,20],//每页的个数
			fit:true,//自动补全
			fitColumns:true,
			iconCls:"icon-save",//图标
			
			columns:[[      //每个列具体内容
		              {field:'id', hidden:true },   
		              {field:'name', title:'权限名',  width:"15%", align:'center' },
		              {field:'url',title:'URL',width:"15%", align:'center'},
		              {field:'pid',title:'层级',width:"15%", align:'center',
		            	  formatter: function(val,row, index) {
			            		if (val == -1){
			        				return '<span style="color:#1d943b;">第一级</span>';
			        			} else{
			        				return '<span style="color:#005580;">第二级</span>';;
			        			}
			            	}   },   
		              {field:'Pname',title:'父权限',width:"15%", align:'center'},
		              {field:'createtime',title:'创建时间',width:"20%", align:'center',
		             	 formatter:function(value,rowData,rowIndex) { 
		            		  var date = new Date(value);//long转换成date
		                      var month = (date.getMonth() + 1);
		                      var day = date.getDate().toString();
		                      if (month < 10) {
		                          month = "0" + month;
		                      }
		                      if (day < 10) {
		                          day = "0" + day;
		                      }
		                      return date.getFullYear().toString() + "年" + month + "月" + day+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
		             	 }
		              },
		              {field:'state',title:'状态',width:"21%", align:'center',
		            	  formatter: function(val,row, index) {
			            		if (val == 1){
			        				return '<span style="color:#2575ed;">正常('+val+')</span>';
			        			} else if (val == 0) {
			        				return '<span style="color:red;">停用('+val+')</span>';;
			        			}
			            	}   
		              }
		          ]],
			toolbar:[              //工具条
			        {text:"增加",iconCls:"icon-add",handler:function(){//回调函数
			        	 $('#dd').dialog('open').window('resize',{width:'300px',top:'87px',left:'399px'});
			        }},
			        {text:"修改",iconCls:"icon-edit",handler:function(){
			        	var rows=datagrid.datagrid('getSelections');
			        	if(rows.length==1)
			        	{
			        		$.ajax({
	        					url : '${cs}/cs/user/Menu/id'+rows[0].id,
	        					data : [],
	        					dataType : 'json',
	        					success : function(r) {
	        						if (r.id) {
	        							$('#dd').dialog({title:'修改权限'});
	        							$('#dd').dialog('open').window('resize',{width:'300px',top:'87px',left:'399px'});
	        							$('#menuLevel').combobox("setValue", r.pid==-1?1:2);
	        							$("#funname").textbox("setValue", r.name);
	        							$("#funurl").textbox("setValue", r.url);
	        							$("#id").val(r.id);
	        							if(r.pid!=-1){
		        							$('#parentID').combobox({
												 url: "${cs}/cs/user/Menu/Fmenu",
												 valueField:'id',
												 textField:'name',
												   onLoadSuccess: function (data) {
											            	 $("#parentID").combobox('setValue',r.pid);
											         }
											 });
	        							}
	        						} else {
	        							$.messager.alert('错误',"数据出错！", 'error');
	        						}
	        					}
	        				});
			        	} else {
			        		$.messager.alert('错误', "只能选择一个数据进行修改", 'error');
			        	}
			        }},
			        {text:"启用",iconCls:"icon-remove",handler:function(){
			        	var rows=datagrid.datagrid('getSelections');
			        	if(rows.length<=0){
			        		$.messager.alert('警告','您没有选择','error');
			        	}else{
			        		$.messager.confirm('确定','您确定要启用吗',function(t){
			        			if(t){
			        				var ids = [];
			        				var rows = datagrid.datagrid('getSelections');
			        				for(var i=0; i<rows.length; i++){
			        					ids.push(rows[i].id);
			        				}
			        				$.ajax({
			        					url : '${cs}/cs/user/Menu/updateStatus',
			        					data : 'status=1&ids='+ids.join(','),
			        					method: 'POST',
			        					dataType : 'json',
			        					success : function(r) {
			        						if (r > 0) {
			        							$.messager.show({
			        								msg : '操作成功',
			        								title : '成功'
			        							});
			        							datagrid.datagrid('reload');
			        						} else {
			        							$.messager.alert('错误', '操作失败', 'error');
			        						}
			        						datagrid.datagrid('unselectAll');
			        					}
			        				});
			        			}
			        		})
			        	}
			        }},
			        {text:"停用",iconCls:"icon-remove",handler:function(){
			        	var rows=datagrid.datagrid('getSelections');
			        	if(rows.length<=0){
			        		$.messager.alert('警告','您没有选择','error');
			        	}else{
			        		$.messager.confirm('确定','您确定要停用吗',function(t){
			        			if(t){
			        				var ids = [];
			        				var rows = datagrid.datagrid('getSelections');
			        				for(var i=0; i<rows.length; i++){
			        					ids.push(rows[i].id);
			        				}
			        				$.ajax({
			        					url : '${cs}/cs/user/Menu/updateStatus',
			        					data : 'status=0&ids='+ids.join(','),
			        					method: 'POST',
			        					dataType : 'json',
			        					success : function(r) {
			        						if (r > 0) {
			        							$.messager.show({
			        								msg : '操作成功',
			        								title : 'Success!'
			        							});
			        							datagrid.datagrid('reload');
			        						} else {
			        							$.messager.alert('错误', '操作失败', 'error');
			        						}
			        						datagrid.datagrid('unselectAll');
			        					}
			        				});
			        			
			        			}
			        		})
			        	}
			        }}
			        ]
		});
		
		 $('#dd').dialog({
             title: "新增权限",
             closed:true,
             modal: true, //dialog继承自window，而window里面有modal属性，所以dialog也可以使用
             toolbar: [{
					text:'Ok',
				iconCls:'icon-ok',
				handler:function(){
					$('#ff').form('submit',{
						onSubmit:function(){
							console.log($('#ff').serializeJson());
							
							var isValid = $(this).form('validate');
							return isValid;
						},
						success: function(r){
							$.messager.show({
								title:r>0?"Success！":"Error!",
								msg:r>0?"恭喜您，操作成功！":"很遗憾，操作失败！"
							})
							$('#ff').form('clear');
							$('#dd').dialog('close');
						}
					},"json");
				
				}
			},{
				text:'Cancel',
				handler:function(){
					$('#dd').dialog('close');
					$('#ff').form('clear');
				}
			}],
			onOpen: function() {
				 $('#menuLevel').combobox("setValue", 1);
				 var defaultValue =[{"menuName": '请选择', "id": '-1'}];
            	 $("#parentID").combobox('loadData',defaultValue);
            	 $('#parentID').combobox("setValue", -1);
			},
			onClose: function() {
				$('#ff').form('clear');
				$("#imghead").attr("src","");
				datagrid.datagrid('unselectAll');
				datagrid.datagrid('reload');
			}
         });
		 
		 initCombox();
	    
		$("#btn_search").click(function(){
			var param = $("#searchForm").serializeJson();
			console.log(datagrid);
			datagrid.datagrid('load',param);
			});
		});
	
	function initCombox() {
		 $('#menuLevel').combobox({
			 data: [
				{"id":1, 
				"text":"父集" 
				},{ 
				"id":2, 
				"text":"子集" 
				}
			  ],
			 valueField:'id', 
			 textField:'text',
			 onSelect: function(){
				 var value = $('#menuLevel').combobox('getValue');
				 if(value==2){
					 $('#parentID').combobox({
						 url: "${cs}/cs/user/Menu/Fmenu",
						 valueField:'id',
						 textField:'name',
						   onLoadSuccess: function (data) {
					             if (data&&data.length>0) {
				            		 $("#parentID").combobox('select',data[0].id);
					             } else {
					            	 var defaultValue =[{"menuName": '请选择', "id": '-1'}];
					            	 $("#parentID").combobox('loadData',defaultValue);
					             }
					         }
					 })
				 }else{
					 $('#parentID').combobox("loadData",[]);
				 }
			 }
		 });
		 
		 $('#parentID').combobox({
			 data: [{"menuName": '请选择', "id": '-1'}],
			 valueField:'id',
			 textField:'menuName',
			 value:'-1'
		 });
	}
    </script>
</head>
<body style="padding:0 4px; margin:0;  overflow: hidden; ">
<div class="easyui-layout" style="width:100%;height:100%;" data-options="fit:true">
		<div title="权限管理" data-options="region:'north'" style="height:70px">
		 <form id="searchForm" >
			<table cellpadding="5">
				    		<tr>
				    			<td>菜单名:</td>
				    			<td><input class="easyui-textbox" type="text" id="name"  name="name" ></input></td>
				    			<td>URL:</td>
				    			<td><input class="easyui-textbox" type="text" id="Url"  name="url" ></input></td>
				    			<td ><a href="#" id="btn_search" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">Search</a></td>
				    		</tr>
				    		<tr>
				    		</tr>
				    	</table>
				  </form>
		</div>
		<div data-options="region:'center'" >
			<table id="dg" >
			</table>
		</div>

			
	<div id="dd" title="新增权限"  style="width:300px;height:380px; text-align: center; " data-options="closed:true">
				    <form id="ff" method="post" action="${cs}/cs/user/Menu/save" >
				    		<input type="hidden" id="id" name="id">
				    	<table cellpadding="5"  style="text-align: left;">
				    		<tr>
				    			<td>权限名:</td>
				    			<td><input class="easyui-textbox" type="text" id="funname"  name="name" data-options="required:true"></input></td>
				    		</tr>
				    		<tr>
				    			<td>URL:</td>
				    			<td><input class="easyui-textbox" type="text" id="funurl"  name="url" data-options="required:true"></input></td>
				    		</tr>
				    		<tr>
				    			<td>层级:</td>
				    			<td>
				    				<select class="easyui-combobox" id="menuLevel" name="menuLevel"   style="width: 100px" data-options="value:'1',panelHeight:'auto'">
				    						
				    				</select>
				    			</td>
				    		</tr>
				    		<tr>
				    			<td>上级权限:</td>
				    			<td>
				    				<select style="width: 200px" class="easyui-combobox" id="parentID" name="Pid" data-options="value:'1',panelHeight:'auto'">
				    				</select>
				    			</td>
				    		</tr>
				    	</table>
				    </form>
				   </div>
		</div>
</body>
</html>